<!--
 * @Author: 黄宇/Hyuishine
 * @Date: 2022-05-24 15:18:54
 * @LastEditors: 徐伟杰
 * @LastEditTime: 2022-12-19 10:57:00
 * @Description: 
 * @Email: hyuishine@gmail.com
 * @Company: 3xData
 * @youWant: 工作台 =》 任务分配 =》 任务详情 =》 选择项目
-->
<template>
  <view class="container_page">
    <!-- 顶部自定义导航栏 -->
    <action-bar :options="navOptions" />
    <view class="header">
      <view class="search_input">
        <input placeholder="请输入项目名称" v-model="searchObject.projectName" :maxlength="20" @blur="switching" />
        <view class="cuIcon-search" />
      </view>
    </view>

    <!-- 内容  -->
    <scroll-view-y :height="232">
      <view slot="scrollView_content">
        <!-- 单挑内容 -->
        <view class="bar" v-for="project, i in list" :key="i" @click="selected(project)">
          <!-- 左侧图标 -->
          <view class="icon">
            <view class="imgType">维护保养</view>
          </view>

          <view class="content">
            <view class="title">{{ project.name ? project.name : '' }}</view>
            <view class="subTitle">合同期限: {{ project.startDate ? project.startDate : '' }} 至
              {{ project.endDate ? project.endDate : '' }}</view>
            <view class="distribution">
              <span class="distribution-box" :class="project.lastMonthTask == '已分配任务' ? 'have' : 'hasnt'">上月{{
                project.lastMonthTask }}</span>
              <span class="distribution-box" :class="project.currentMonthTask == '已分配任务' ? 'have' : 'hasnt'">本月{{
                project.currentMonthTask }}</span>
            </view>
          </view>
          <view class="right">
            <view class="cuIcon-right" />
          </view>
        </view>
      </view>
    </scroll-view-y>
  </view>
</template>
<script>

import ScrollViewY from '@/components/scrollViewY/index.vue'
export default {
  components: { ScrollViewY },
  data() {
    return {
      navOptions: {
        left: {
          icon: 'back'
        },
        center: {
          title: "项目列表"
        }
      },
      list: [],
      searchObject: {
        projectName: '', // 项目名称
      },
    }
  },
  //! 提供给组件 下拉刷新上拉加载的 数据获取的方法
  provide() {
    return {
      getData: this.getList
    }
  },
  created() {
    this.getList()
  },
  computed: {
    // 内容页的 最小高度 100vh - 顶部自定义标题栏
    contentHeight() {
      // 顶部自定义导航栏高度
      const actionBarHeight = uni.getStorageSync("menuInfo").actionBarHeight || 40
      return 'height:calc(100% - ' + actionBarHeight + 'px);'
    }
  },
  methods: {
    // 获取列表
    getList() {
      this.$store.dispatch('projectName', this.searchObject).then(res => {
        if (res.code === 200 && res) {
          this.list = res.data
        }
      })
    },
    // 选择完跳回页面
    selected(project) {
      let platform = uni.getSystemInfoSync().platform
      if (platform == 'ios' || platform == 'devtools') {
        uni.navigateBack({
          success: () => {
            const pages = getCurrentPages();
            //! 在真机调试时，这里必须得是-2，但是在微信开发工具上时必须得是-1 ，问题暂不知，切记切记
            const prevPage = pages[pages.length - 2];
            prevPage.$vm.getProjectInfo(project); // 调用上一个页面的方法 getProjectInfo
          }
        });
      } else if (platform == 'android') {
        uni.navigateBack({
          success: () => {
            const pages = getCurrentPages();
            //! 在真机调试时，这里必须得是-2，但是在微信开发工具上时必须得是-1 ，问题暂不知，切记切记
            const prevPage = pages[pages.length - 2];
            prevPage.$vm.getProjectInfo(project); // 调用上一个页面的方法 getProjectInfo
          }
        });
      }
    },
    switching() {
      this.list = []
      this.getList()
    },
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

.container_page {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background-color: #eff1f7;

  .header {
    background-color: $OVERALL_SITUATION_BACKGROUND;
    padding: 24rpx;
    border-radius: 0 0 20rpx 20rpx;
    margin-bottom: 24rpx;
    display: flex;
    line-height: 80rpx;
    font-size: 36rpx;

    .search_input {
      background: white;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 24rpx;
      border-radius: 20rpx;

      input {
        flex: 1;
        font-size: 36rpx;
      }
    }
  }

  .bar {
    background-color: white;
    padding: 24rpx;
    display: flex;
    border-radius: 20rpx;
    width: calc(100% - 40rpx);
    margin: 0 auto 24rpx;

    &:active {
      background-color: rgba(52, 90, 199, 0.1);
    }

    .icon {
      width: 20%;

      .imgType {
        width: 80rpx;
        height: 80rpx;
        text-align: center;
        border-radius: 50%;
        border: 2rpx solid #ff4539;
        color: #ff4539;
        font-size: 28rpx;
        margin: 5rpx;
        line-height: 50rpx;
        padding: 5rpx;
        line-height: 1.3;
      }
    }

    .content {
      flex: 1;

      .title {
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 20rpx;
      }

      .distribution {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-content: center;

        &-box {
          font-size: 22rpx;
          margin-right: 10rpx;
          padding: 0 5rpx;
        }

        .have {
          color: #3ca6fe;
          border: 1px solid #3ca6fe;
        }

        .hasnt {
          color: #ff4539;
          border: 1px solid red;
        }
      }
    }

    .right {
      margin-top: 20rpx;
      right: 2rpx;
    }
  }
}

// .header {
//   position: relative;
//   background-color: #345ac7;
//   border-radius: 0 0 20rpx 20rpx;
//   margin-bottom: 24rpx;

//   .search_input {
//     flex: 1;
//     display: flex;
//     align-items: center;
//     justify-content: space-between;
//     background: white;
//     border-radius: 20rpx;

//     input {
//       flex: 1;
//       font-size: 36rpx;
//     }
//   }
// }


::v-deep .input-placeholder {
  font-size: 28rpx;
}
</style>